<template>
    <Page class="basic company">
        <template #header>
            <el-input v-model="params.villageName" placeholder="请输入所属项目名称" maxlength="50" />
            <EdSelect  v-model="params.status" :selectParams="selectParamsHouse"></EdSelect>
            <el-input v-model="params.roomCode" maxlength="4" placeholder="请输入房号" />
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重置</el-button>
        </template>
        <PageCard title="房屋管理">
            <template #actions>
                <!-- <el-button icon="el-icon-upload2" @click="exportBtn">导出数据</el-button> -->
                <el-popover
                        placement="bottom"
                        title=""
                        ref="popoverRef"
                        trigger="click">
                    <div slot="">
                        <el-upload
                                class="avatar-uploader"
                                action=""
                                drag
                                accept=".xlsx"
                                :before-upload="beforeAvatarUpload"
                                :http-request="httpRequest"
                                :show-file-list="false">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">
                                <el-link icon="el-icon-download" type="primary" download="房屋导入模板.xlsx" href="/template/房屋导入模板.xlsx">房屋模板下载</el-link>
                            </div>
                        </el-upload>
                    </div>
                    <el-button slot="reference" class="ed-table-bottom ed_black_border" v-has="'basic:house:import'"><svg-icon class="svg-middle" icon-class="Import_logo"/>&nbsp;导入数据</el-button>
                </el-popover>
                <!-- <el-button class="ed-button ed_black-bottom" @click="add()"><svg-icon icon-class="add-svg"/>添加房屋</el-button> -->
            </template>
            <ApiTable :api="tableApi" ref="table" :params="params">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="所属项目"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="stagesName" label="分期"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="buildingCode" label="楼栋" ></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="unitName" label="单元"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="roomCode" label="房屋号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="type" label="资源类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type=='商铺'">商铺</span>
                        <span v-else-if="scope.row.type=='住宅'">住宅</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="area" label="建筑面积"></el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" label="房屋状态">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status==0" plain size="mini">入住</el-button>
                        <el-button v-else-if="scope.row.stauts==1" type="warning"  size="mini" plain>空置</el-button>
                    </template>
                </el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="ownerName" label="绑定业主"></el-table-column>
                <el-table-column width="180" label="操作">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" v-has="'basic:house:update'" @click="updateRow(scope.row)">编辑</el-button>
                        <el-button class="ed-table-bottom ed_blue_border" v-has="'basic:house:masterChange'" @click="masterChange(scope.row)">业主变更</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <EdDialog ref="dialogRef" v-if="showCode" title="业主变更" @close-dialog="closeDialog" @save-dialog="saveDialog">
            <el-form :model="editForm"  ref="ruleForm" label-position='right' label-width="auto">
                <el-form-item label="原业主" prop="oldOwnerName">
                    <el-input v-model="editForm.oldOwnerName" disabled></el-input>
                </el-form-item>
                <el-form-item label="现业主" prop="ownerName" :rules="$validate.validates({required:true,msg:'请输入现业主'})" >
                    <el-input v-model="editForm.ownerName"></el-input>
                </el-form-item>
                <el-form-item label="身份证" prop="ownerCard"  >
                    <el-input v-model="editForm.ownerCard"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="ownerPhone" :rules="$validate.validates({required:true,msg:'请输入手机号',type:'mobile'})" >
                    <el-input v-model="editForm.ownerPhone"></el-input>
                </el-form-item>
            </el-form>
        </EdDialog>
        <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>
        
    </Page>
</template>

<script>
import EdExport from "src/components/EdExport.vue";
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import EdCascader from 'src/components/EdCascader.vue'
import EdDialog from 'src/components/EdDialog.vue'
import { defineComponent } from 'vue'
import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
import {houseList,batchRoom,changeOwner} from "./api.js";
import { getDictByCode } from "src/api/dictionaries";
export default defineComponent({
    name: 'house',
    components: { Page, PageCard, ApiTable,EdSelect, EdCascader,EdDialog,EdConfirmDelete,EdExport },
    data() {
        return {
            value:"",
            params:{
                villageName:"",
                status:"",
                roomCode:''
            },
            selectParamsHouse:{
                options: [],
                props:{label:'label', value:'value'},
                placeholder:"请选择状态"
            },
            showCode: false,
            editForm: {
                oldOwnerCard: "",
                oldOwnerId: "",
                oldOwnerName: "",
                oldOwnerPhone: "",
                ownerCard: "",
                ownerName: "",
                ownerPhone: "",
                roomId: "",
                villageId: ""
            },
            dataApi:{
                url:"/resource/room/export",
                pages:0
            },
            isEdExport:false
            
        }
    },
    activated(){
        getDictByCode("room_status").then(response => {
            // console.log(response);
            if(response.success) {
                this.selectParamsHouse.options=response.data.items
            }
        }),
        this.$nextTick(()=>{
            this.$refs.table.load()
        })
    },
    methods: {
        tableApi:houseList,
        updateRow(row){
            this.$router.push({
                path: '/basic/house-uodate',
                query: {id:row.roomId}
            })
        },
        // add(){
        //     this.$router.push({
        //         path:'/basic/house-add'
        //         })
        // },
        masterChange(row){
            this.showCode = true
            // this.editForm = row
            this.editForm.roomId = row.roomId
            this.editForm.villageId = row.villageId
            this.editForm.oldOwnerName = row.ownerName
            this.editForm.oldOwnerPhone=row.ownerPhone
            this.editForm.oldOwnerId=row.ownerId
            // this.editForm.oldOwnerCard
        },
        closeDialog(){
            // 用dialog的组件一定要这么写，要不然下次点击的时候不弹框
            this.showCode = false
            this.$refs.ruleForm.resetFields()
        },
        saveDialog(){
            this.$refs.dialogRef.loading  = false
            this.$refs.ruleForm.validate((valid)=>{
                if(valid){
                    // 点dialog确定的时候调数据
                    this.$refs.confirmDeleteRef.open("操作确认","是否执行此操作？","warning")
                }else {
                    // console.log(this.$refs.dialogRef);
                    this.$refs.dialogRef.loading  = false
                }
            })
        },
        confirmDeleteTrue(){
            changeOwner(this.editForm).then(response => {
                    if(response.success) {
                        this.$message.success({
                            message: '业主变更成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load()
                        this.$refs.ruleForm.resetFields()
                        this.showCode= false
                        this.$refs.dialogRef.loading  = false
                    }
                })
        },
        search(){
            this.$refs.table.load(1)
        },
        reset(){
            this.params = {
                villageName:"",
                status:"",
                roomCode:''
            };
            this.$nextTick(()=>{
                this.$refs.table.load(1,10)
                })
        },
        beforeAvatarUpload(file){
            const fileType = file.name.split('.');
            const fileDate = fileType.slice(-1);
            if (['xlsx'].indexOf(fileDate[0]) < 0) {
                this.$message.error('仅支持文件格式：.xlsx');
                return false
            }
            const isLt2M = file.size / 1024 / 1024 < 30;
            if (!isLt2M) {
                this.$message.error('上传文件大小不能超过 30MB!');
            }
            if(isLt2M){
                this.upFile = new FormData();
                this.upFile.append("file",file)
            }
            return isLt2M;
        },
        httpRequest(){
            batchRoom(this.upFile).then(response => {
                if(response.success) {
                    this.$message.success({
                        message: '导入成功！',
                        duration: 2000,
                        center:true
                    });
                    this.$refs.table.load(this.queryForm)
                }
                this.$refs.popoverRef.doClose()
            }).catch(()=>{
                this.$refs.popoverRef.doClose()
            })
        },
        exportBtn(){
            console.log(this.$refs.table);
            this.dataApi.pages = this.$refs.table.page.total;
            if(this.dataApi.pages > 0){
                this.dataApi = Object.assign(this.dataApi,this.params);
                this.isEdExport = true;
            }else {
                this.$message.info({
                    message:"暂无数据导出",
                    duration: 2000,
                    center:true
                })
            }
        },
    },
    
})
</script>

<style>
</style>